<!--
 * @Author: cjy
 * @Date: 2020-12-08 16:08:29
 * @LastEditors: Please set LastEditors
 * @Descripttion: 
 * @LastEditTime: 2021-07-27 18:02:57
 * @FilePath: \vue-openlayers\src\views\mapExport\MapExport.vue
-->
<template>
    <div>
        <div id="map" class="map"></div>
        <a id="export-png" class="btn btn-default"><span class="downloadIMG"  @click="exportImg()">Download PNG</span> </a>
        <a id="image-download" download="map.png"></a>
    </div>
</template>
<script>
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import View from 'ol/View';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
export default {
    data() {
        return {
            map: null,
            mapSizeWidth:0,
            mapSizeHeight:0
        }
    },
    methods:{
        init(){
            this.map = new Map({
                layers: [
                    new TileLayer({
                    source: new OSM(),
                    }),
                    new VectorLayer({
                        source: new VectorSource({
                            url: 'data/geojson/countries.geojson',
                            format: new GeoJSON(),
                        }),
                        opacity: 0.5,
                    }) 
                    ],
                target: 'map',
                view: new View({
                    center: [0, 0],
                    zoom: 2,
                }),
            });
            console.log(this.map.getSize());
            this.mapSizeWidth = this.map.getSize()[0];
            this.mapSizeHeight = this.map.getSize()[1];
        },
        exportImg(){
            let that = this;
            this.map.once('rendercomplete', function () {
                var mapCanvas = document.createElement('canvas');
                // var size = this.map.getSize();
                // mapCanvas.width = size[0];
                // mapCanvas.height = size[1];
                console.log(that.mapSizeWidth);
                mapCanvas.width = that.mapSizeWidth;
                mapCanvas.height =  that.mapSizeHeight;
                var mapContext = mapCanvas.getContext('2d');
                Array.prototype.forEach.call(
                    document.querySelectorAll('.ol-layer canvas'),
                    (canvas) =>{
                        if (canvas.width > 0) {
                        var opacity = canvas.parentNode.style.opacity;
                        mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                        var transform = canvas.style.transform;
                        // Get the transform parameters from the style's transform matrix
                        var matrix = transform
                            .match(/^matrix\(([^\(]*)\)$/)[1]
                            .split(',')
                            .map(Number);
                        // Apply the transform to the export map context
                        CanvasRenderingContext2D.prototype.setTransform.apply(
                            mapContext,
                            matrix
                        );
                        mapContext.drawImage(canvas, 0, 0);
                        }
                    }
                );
                if (navigator.msSaveBlob) {
                    // link download attribuute does not work on MS browsers
                    navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
                } else {
                    var link = document.getElementById('image-download');
                    link.href = mapCanvas.toDataURL();
                    link.click();
                }
            });
            this.map.renderSync();
            console.log("end");
        }
    },
    mounted(){
        this.init();
    }
    
}
</script>
<style lang="scss" scope>
     .map {
        width: 100%;
        height:400px;
      }
      .downloadIMG{
          cursor: pointer;
      }
</style>
